<template>
  <div class="app-container home">
    <div class="title">智慧工会</div>
    <div class="content">
      <el-scrollbar>
        <van-swipe class="news-banner" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="banner in bannerList" @click="toDetail(banner)">
            <img class="cover" :src="require(`@/assets/images/${banner.cover}`)" alt="">
          </van-swipe-item>
        </van-swipe>
        <div class="menu-group" v-for="menuGroup in menuGroupList" :key="menuGroup.title">
          <div class="menu-group-title">
            {{ menuGroup.title }}
          </div>
          <div class="menu-item-box">
            <div class="menu-item" v-for="menuItem in menuGroup.menuItemList" :key="menuItem.label"
              :class="menuItem.disable&&'disable'" @click="toPage(menuItem)">
              <!-- <div class="menu-icon">{{ '集团信息' }}</div> -->
              <img class="menu-icon" :src="require(`@/assets/images/home/${menuItem.icon}`)">
              <div class="menu-label">{{ menuItem.label }}</div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <IndexTabBar />
  </div>
</template>

<script>
import IndexTabBar from '@/components/IndexTabBar/index.vue';

export default {
  name: 'HomeView',
  components: { IndexTabBar },
  data() {
    return {
      bannerList: [
        { cover: 'laborNews/1.png', path: 'https://mp.weixin.qq.com/s/WlryMse1gqtT2wRJ0GfeiA?color_scheme=light' },
        { cover: 'laborNews/2.png', path: 'https://mp.weixin.qq.com/s/I1b-sD7oGI2fRaAfoFbA-A?color_scheme=light' },
        { cover: 'laborNews/3.png', path: 'https://mp.weixin.qq.com/s/VADedbgrX3_JP-q9E2sGoQ?color_scheme=light' },
      ],
      menuGroupList: [
        // {
        //   title: '工会新闻',
        //   menuItemList: [
        //     { label: '集团信息', path: 'groupInfo', icon: 'GroupInfo.png', },
        //     { label: '省公司动态', path: 'companyNews', icon: 'CompanyNews.png', },
        //     { label: '基层动态', path: 'grassrootsNews', icon: 'GrassrootsNews.png', disable: true },
        //   ],
        // },
        {
          title: 'AI互助会',
          menuItemList: [
            { label: '保险经纪人', path: '/insuranceRecommend', icon: 'InsuranceAgent.png' },
            { label: '工会互助会', path: '', icon: 'MutualAidSociety.png', disable: true },
          ],
        },
        {
          title: '员工荣誉',
          menuItemList: [
            { label: '荣誉计划', path: '', icon: 'PersonalHonor.png' },
            { label: '劳模培育', path: '', icon: 'ModelWorkerCultivation.png', disable: true },
          ],
        },
        {
          title: '活动',
          menuItemList: [
            { label: '投票', path: '/vote/index', icon: 'QuestionnaireVoting.png' },
            { label: '活动报名', path: '', icon: 'CourseEnrollment.png' },
            { label: '赛事报名', path: '/activityRegister/index', icon: 'AssociationsClubs.png' },
            { label: 'AI知识库对话', path: '/activityRegister/index', icon: 'KnowledgeChat.png' },
            { label: '图文点赞', path: '/activityRegister/index', icon: 'Like.png' },
            {
              label: '慰问品发放',
              path: '/condolenceDistribution/index',
              icon: 'LaborUnionActivities.png',
              disable: true,
            },
            { label: '订场', path: '/booking/index', icon: 'BookingSportsGround.png', disable: true },
            { label: '钢琴培训', path: '', icon: 'PianoTraining.png', disable: true },
            { label: '智慧福利', path: '', icon: 'SmartBenefits.png', disable: true },
          ],
        },
        {
          title: '心灵驿站',
          menuItemList: [
            // { label: '运动打卡', path: '', icon: 'SportsCheckIn.png' },
            // { label: '智慧健康', path: '', icon: 'Smart Health.png' },
            // { label: '心灵驿站', path: '/mindStation/index', icon: 'MindStation.png' },
            { label: '心理探针', path: '/mindStation/mindProbes', icon: 'MindProbes.png' },
            { label: '心理辅导', path: '/mindStation/mindCare', icon: 'MindCare.png' },
            { label: '心理科普', path: '/mindStation/mindClasses', icon: 'MindClasses.png' },
          ],
        },
        {
          title: '民主管理',
          menuItemList: [
            { label: '职工代表提案', path: '', icon: 'ProposalSystem.png' },
            { label: '职工代表大会', path: '', icon: 'StaffCouncil.png', disable: true },
            { label: '座谈会', path: '', icon: 'Symposium.png', disable: true },
          ],
        },
        // {
        //   title: '员工福利',
        //   menuItemList: [
        //     { label: '智慧福利', path: '', icon: 'SmartBenefits.png' },
        //     { label: '消费帮扶', path: '', icon: 'ConsumerSupport.png' },
        //   ],
        // },
      ],
    };
  },
  methods: {
    toDetail(item) {
      window.open(item.path, '_blank');
    },
    toPage(item) {
      if (item.disable) return;
      this.$router.push(item.path);
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 0 20px;
  width: calc(100% - 40px);
  color: #333;
  &.home {
    background-image: url('~@/assets/images/home/heart.png'),
      linear-gradient(180deg, #afe7fd 0%, #f2f4f9 50%, #e6eaf4 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top right;
  }
}

.title {
  padding: 12px 0;
  font-size: 18px;
  font-weight: bold;
}

.content {
  width: 100%;
  height: calc(100% - 108px);

  ::v-deep .el-scrollbar {
    height: 100%;
  }

  .news-banner {
    margin-bottom: 10px;
  }

  .menu-group {
    margin-bottom: 10px;
    padding: 16px 20px;
    background: linear-gradient(270deg, #f8f7fc99 0%, #fafafa99 100%);
    border-radius: 10px;
    .menu-group-title {
      padding-bottom: 16px;
      border-bottom: 0.5px solid #e6eaf3;
    }
  }
  .menu-item-box {
    // padding-top: 16px;
    display: flex;
    flex-wrap: wrap;

    .menu-item {
      display: inline-block;
      text-align: center;
      width: 25%;
      margin-top: 16px;
      cursor: pointer;
      &.disable {
        filter: grayscale(1);
        opacity: 0.5;
        cursor: not-allowed;
      }
      // margin: 0 20px 20px 0; // 间隙为20px
      // width: calc((100% - 60px) / 4);
      // margin-left: 25px;
      // margin-right: 25px;
      &:last-child {
        // margin-right: 0;
      }
      .menu-icon {
        width: 36px;
        height: 36px;
      }
      .menu-label {
        font-size: 14px;
      }
    }
  }
}
</style>
